---
title: 前端工程师简历终极指南
description: 获取写作技巧、范例和最佳实践，帮助您入围下一份前端工作
seo_title: 前端工程师简历指南 | 技巧、示例、策略
seo_description: 使用我们的终极指南制作完美的前端工程师简历。获取前端特定技巧、真实示例和策略，帮助您获得前端职位。
social_title: 前端工程师简历指南 | 前端面试手册
---

为了获得前端工程师的职位面试机会，我们必须提交一份通过公司简历筛选流程的简历。 现有的资源很多，可以帮助您制作一份优秀的软件工程师简历，但很少有专门针对前端工程师的。 有关一般的软件工程师简历技巧，请参阅 \[Tech Interview Handbook]\(https://www.techinterviewhandbook.org/resume/）。

在本页中，我们提供了一些前端特定的技巧，以帮助前端工程师改进他们的简历并进入面试阶段。

## 基本要求

* 如果您的经验少于 5 年，最好保持在一页以内，不超过两页
* 使用 Microsoft Word、Google Docs、Pages 或 LaTeX 构建，以便申请人跟踪系统 (ATS) 可以解析简历。 避免使用设计软件
* 以 PDF 格式提交

## 格式和美学

前端工程师经常处理用户界面，并且应该对设计有敏锐的意识。 如果您的简历在美学上不令人满意，那么这对您作为前端工程师来说会产生非常糟糕的影响。

* 使用单列格式
* 使用大多数操作系统上可用的常见字体，如 Arial、Calibri 或 Garamond。 避免使用花哨的字体
* 坚持使用一种或最多两种字体（一种用于标题，另一种用于正文）
* 最小字号为 11px

您的简历不需要超级漂亮和花哨，它只需要看起来整洁且赏心悦目。 如果您有闲钱，创建美观且对 ATS 友好的简历的最快方法是从 [FAANG Tech Leads](https://www.faangtechleads.com/) 购买简历模板。

## 工作经验部分

简历的工作经验部分是最重要的，应该占据简历的大部分空间。 在本节中突出您对过去或当前雇主业务目标的贡献非常重要，

为了提高简历的 ATS 排名，请在简历中尽可能多地散布“前端”。 如果您的官方头衔是“软件工程师”，但您在工作中做了大量的前端开发，请考虑将您的头衔改为“前端工程师”/“前端软件工程师”/“软件工程师（前端）”，以提高相关性。

人们常犯的错误是没有提供足够多的关于他们的经验和成就的细节。 为了脱颖而出，提供关于您的经验和成就的**规模、复杂性和影响**的足够信息非常重要。

* **错误 👎**：“使用 HTML、CSS 和 JavaScript 构建了一个网站”
* **更好 👍**：“构建了一个高性能的电子商务网站，允许用户浏览数百个商品，添加到他们的购物车并通过 PayPal 结账。 该网站有 20k MAU，加载时间不到 2 秒，Lighthouse 评分为 98。 使用的技术：Next.js、React、GraphQL、CSS 模块”

以下是一个适合提及的与前端相关的技术成就的非详尽列表：

* **产品工作**：详细说明在产品中构建的功能
* **性能**：进行的性能改进以及由此带来的百分比增益。例如，页面加载大小、页面加载时间、Lighthouse 分数改进等。
* **测试**：编写的测试数量、它们涵盖了多少关键流程、测试覆盖率的 % 增加
* **SEO**：SEO 错误/警告的 % 或数值减少。如果公司使用 SEO 工具（如 Ahrefs 和 Semrush），则此指标很容易获得
* **可访问性 (a11y)**：修复的 a11y 错误数量、改进以满足 WCAG AA/AAA 级一致性的流程数量、a11y 改进的组件数量
* **工具**：代码库中使用的技术现代化，例如将 jQuery 代码库迁移到 React，通过引入 TypeScript 提高类型安全性。描述产品或提及代码行数/工程师的大概数量，以更好地了解规模和复杂性

## 技能部分

"技能"部分是您拥有的语言和技术的列表，当 ATS/招聘人员/招聘经理阅读本节时，它充当快速清单/摘要。 至少，您应该为“语言”和“技术”类别提供两个列表项：

由于构建前端应用程序需要大量不同的技术，您可能会发现您需要在简历的技能部分添加许多技术。但是，不要添加每一种技术！这将稀释真正重要的技能的权重。优先考虑以下语言/技术：

### 1. 出现在职位列表中

如果技能出现在职位列表中，并且您有相关经验，那么您绝对应该添加它。

### 2. 仅列出影响架构的关键技术

像 React 这样的库极大地影响了其他伴随的技术选择，而像 Underscore/Lodash 这样的库是与架构无关的，可以轻松替换。优先考虑前者，并省略易于替换的小型/实用程序库。

### 3. 广为人知或迅速普及

这表明您紧跟现代前端生态系统。该公司可能也在考虑转向该技术，如果您在这方面有经验，那将是一个加分项。

### 4. 展示您的广度

即使您确实熟悉 React、Angular 和 Vue（所有前端视图框架），列出所有这些也是多余的。很少有职位列表会列出多个用于相同目的的技术（如果这样做，则是一个危险信号）。添加太多技术（尤其是同一类别中的技术）会使读者更难了解您的技能。

尝试列出**至少一个且最多两个**属于以下类别的技术。并非所有类别都适用于您，因此仅包括相关的类别。下面显示了流行的示例。

* **JavaScript 库**: [React](https://react.dev/), [Angular](https://angular.io/), [Vue](https://vuejs.org/), [Svelte](https://svelte.dev/)
* **元框架**: [Next.js](https://nextjs.org/), [Gatsby](https://www.gatsbyjs.com/), [Nuxt](https://nuxtjs.org/), [SvelteKit](https://kit.svelte.dev/)
* **状态管理**: [Redux](https://redux.js.org/), [Flux](https://facebook.github.io/flux/), [Jotai](https://jotai.org/), [Zustand](https://github.com/pmndrs/zustand), [Relay](https://relay.dev/)
* **CSS**: [CSS Modules](https://github.com/css-modules/css-modules), [Styled Components](https://styled-components.com/), [Tailwind CSS](https://tailwindcss.com/), [Sass](https://sass-lang.com/), [Less](https://lesscss.org/)
* **CSS 框架**: [Bootstrap](https://getbootstrap.com/), [MUI](https://mui.com/), [Chakra UI](https://chakra-ui.com/), [Bulma](https://bulma.io/)
* **单元测试**: [Jest](https://jestjs.io/), [Vitest](https://vitest.dev/), [Storybook](https://storybook.js.org/), [Mocha](https://mochajs.org/), [Jasmine](https://jasmine.github.io/), [Karma](https://karma-runner.github.io/latest/index.html)
* **数据获取**: [GraphQL](https://graphql.org/), [tRPC](https://trpc.io/), [TanStack Query](https://tanstack.com/query/v3/), [swr](https://swr.vercel.app/)
* **集成测试**: [Cypress](https://www.cypress.io/), [Selenium](https://www.selenium.dev/), [Puppeteer](https://pptr.dev/), [WebdriverIO](https://webdriver.io/), [Playwright](https://playwright.dev/)
* **语言工具**: [Babel](https://babeljs.io/), [TypeScript](https://www.typescriptlang.org/), [Flow](https://flow.org/), [ESLint](https://eslint.org/)
* **构建工具（可选）**: [webpack](https://webpack.js.org/), [Vite](https://vitejs.dev/), [Parcel](https://parceljs.org/), [Gulp](https://gulpjs.com/), [Rollup](https://rollupjs.org/), [Browserify](https://browserify.org/)
* **包管理（可选）**: [npm](https://www.npmjs.com/), [Yarn](https://yarnpkg.com/), [pnpm](https://pnpm.io/)

### 示例

这应该就是我们简历上的“技能”部分的样子：

* **语言**：HTML、CSS、JavaScript、TypeScript
* **技术**：React、Next.js、Tailwind CSS、Jest、Storybook、Cypress、React Query、Yarn、webpack

这正是用于构建 GreatFrontEnd 的技术栈。您绝对应该在“语言”项下列出 HTML、CSS、JavaScript，否则就会出现严重问题。

## 项目部分

前端领域发展迅速，每年都会出现新的 JavaScript 框架和 CSS 方法。在您的简历上拥有项目表明您对该领域充满热情，并付出了额外的努力来跟上最新的前端技术，尤其是在您的工作中没有使用这些技术的情况下，这是一个巨大的积极信号。列出每个项目使用的技术，尤其是如果它们是公司使用的现代技术。它有助于 ATS 排名，并在读者心中留下更深刻的印象。如果可能，将代码放在 GitHub 上，并使用产品的屏幕截图完善 README。将项目的代码和实时网站的链接添加到您的简历中。

开源贡献，尤其是对复杂代码库的非平凡更改，被视为技术能力的标志。如果您创建了开源项目或维护了开源项目，那就更好了。

## 摘要

虽然 [Tech Interview Handbook 的一般软件工程师简历提示](https://www.techinterviewhandbook.org/resume/) 对于前端工程师来说已经足够了，但上述提示将帮助您提升前端工程师的简历，并使其更上一层楼。
